<!--
 * @Description:
 * @Autor: 刘诗文
 * @Date: 2020-11-11 17:08:32
 * @LastEditors: 马毅
 * @LastEditTime: 2021-10-27 10:40:46
-->
  <!-- 救援维护-经销商端页面 -->
<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" :labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      height="500"
      :columns="columns"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :datakey="'records'"
      columnsRef="rescueOrderlsw"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="onRowSelectChange"
    >
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="() => this.openHandler('add', {})">新建</el-button>
        <multiuse-button size="small" type="primary" icon="el-icon-download" :click="outExportData.bind()">下载</multiuse-button>
      </template>
    </FilterTable>
    <Drawer
      :visible.sync="actions.visible"
      :title="actions.title"
      width="90%"
      destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
      @close="refreshHandle"
    >
      <addRescuePanel :type.sync="actions.type" :formData="this.resData" @close="closeHandler" />
    </Drawer>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { exportExcelFile } from '@/utils/index';
import { getRescueList, getOutExport } from '@/api/customerRepair/rescueManagement/rescueOrder';
import addRescuePanel from './addRescuePanel';
export default {
  name: 'rescueOrder',
  components: {
    addRescuePanel
  },
  mixins: [dictionary],
  data() {
    this.selectedRow = null;
    this.BaseTable = null;
    this.resData = {};
    return {
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchapi: getRescueList,
      fetchParams: { pageNum: 1 },
      actions: { visible: false, type: '', title: '' }, // 弹出面板的相关信息
      regionList: []
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table;
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '救援申请单号',
          fieldName: 'outNo',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          initialValue: ''
        },
        {
          type: 'RANGE_DATE',
          label: '创建日期',
          fieldName: 'createdStartDate|createdEndDate',
          placeholder: '请输入',
        },
        {
          type: 'RANGE_DATE',
          label: '提报日期',
          fieldName: 'applyStartDate|applyEndDate',
          placeholder: '请输入',
        },
        {
          type: 'SELECT',
          label: '单据状态',
          fieldName: 'outStatus',
          initialValue: '',
          itemList: this.createDictList(5536)
        },

      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          showOverFlowToolTip: true,
          fixed: 'left',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          render: props => {
            return (
              <div>
                <el-button
                  size="mini"
                  type="text"
                  disabled={props.row.outStatus === 55361002 ||  props.row.outStatus === 55361003 ? true : false  }
                  onClick={() => this.openHandler('edit', props.row)}
                >
                  编辑
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.openHandler('detail', props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '救援申请单号',
          dataIndex: 'outNo',
          width: 120,
          showOverFlowToolTip: true,
        },
        {
          title: '单据状态',
          dataIndex: 'outStatus',
          width: 120,
          showOverFlowToolTip: true,
          dictItems: this.createDictList(5536)
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 120,
          showOverFlowToolTip: true
        },
        {
          title: '车牌号',
          dataIndex: 'vhlPlate',
          width: 120,
          showOverFlowToolTip: true
        },
        {
          title: '电机号',
          dataIndex: 'engineCode',
          width: 120,
          showOverFlowToolTip: true
        },
        {
          title: '车型',
          dataIndex: 'vehicleType',
          width: 120,
          showOverFlowToolTip: true
        },
        {
          title: '创建日期',
          dataIndex: 'createdAt',
          width: 135,
          showOverFlowToolTip: true
        },
        {
          title: '提报日期',
          dataIndex: 'applyAt',
          width: 135,
          showOverFlowToolTip: true
        },
      ];
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(this.BaseTable.EXECUTE_RESET_HEIGHT);
    },
    onRowSelectChange(row) {
      if (!row.length) {
        this.selectRow = null;
      } else {
        this.selectedRow = row[0];
      }
    },
    // 救援单维护处理
    openHandler(type, row) {
      if (type === 'add') {
        this.actions = { visible: true, title: '救援单新增', type: type };
      } else if (type === 'edit') {
        this.resData = row;
        this.actions = { visible: true, title: '救援单编辑', type: type };
      } else if (type === 'detail') {
        this.resData = row;
        this.actions = { visible: true, title: '救援单明细', type: type };
      }
    },
    closeHandler(val) {
      this.actions.visible = val;
      this.fetchParams = { ...this.fetchParams };
    },
    refreshHandle() {
      this.fetchParams = { ...this.fetchParams };
    },
    // 导出
    async outExportData() {
      await getOutExport(this.fetchParams).then(res => {
        console.log(res);
        if (res.status !== 'failure') {
          exportExcelFile(res.data, '救援单信息');
        } else {
          notifyAction('导出失败', 'error');
        }
      });
    }
  }
};
</script>
<style lang="less" scoped></style>
